const jsx1 = `const element = <h1>Hello, React!</h1>;`
const jsx2 = `const name = 'React';
const element = <h1>Hello, {name}!</h1>;`
const jsx3 = `// 字符串属性
const element = <div className="container">Hello</div>;
// 表达式属性
const element = <img src={user.avatarUrl} />;`



const com1 = `function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}`
const com2 = `class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}`
const com3 = `function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}`



const ref1 = `import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);
  
  const handleClick = () => {
    inputRef.current.focus();
  };
  
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>聚焦输入框</button>
    </div>
  );
}`
const ref2 = `import { useRef, useEffect } from 'react';

function AutoFocusInput() {
  const inputRef = useRef(null);
  
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  
  return <input ref={inputRef} type="text" />;
}`
const ref3 = `import { useRef, useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);
  const intervalRef = useRef(null);
  
  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    
    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);
  
  return (
    <div>
      <p>计时: {count}秒</p>
      <button onClick={() => clearInterval(intervalRef.current)}>停止</button>
    </div>
  );
}`
const ref4 = `function CustomTextInput(props) {
  const textInput = useRef(null);
  
  const handleClick = () => {
    textInput.current.focus();
  };
  
  return (
    <div>
      <input
        type="text"
        ref={(input) => textInput.current = input} // 使用回调ref
      />
      <button onClick={handleClick}>聚焦输入框</button>
    </div>
  );
}`
const ref5 = `import { forwardRef } from 'react';

const FancyButton = forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 现在可以获取button的DOM节点
const ref = useRef(null);

<FancyButton ref={ref}>点击我</FancyButton>`
const ref6 = `import { forwardRef, useImperativeHandle } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  
  return <input ref={inputRef} ... />;
});

// 父组件使用
function Parent() {
  const inputRef = useRef();
  
  return (
    <>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>聚焦输入框</button>
    </>
  );
}`


const pro1 = `function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 使用
<Welcome name="Sara" />`
const pro2 = `function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Welcome.defaultProps = {
  name: 'Guest'
};`
const pro3 = `import PropTypes from 'prop-types';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Welcome.propTypes = {
  name: PropTypes.string.isRequired
};`
const pro4 = `function PropsTest(params: { count: any; changeCount: Function }) {
    return (<>
        传入的值是：{params.count}
        &nbsp;&nbsp;
        <button onClick={() => params.changeCount(100)} className='mainButton'>子传父</button>
    </>);
}

PropsTest.defaultProps = {
    count: 0,
    changeCount: () => { }
}

export default PropsTest;`
const pro5 = `const MsgContext = createContext('');

function A() {
  return (
    <>
      组件A
      <B></B>
    </>
  );
}
function B() {
 const msg =  useContext(MsgContext);
  return (
    <>
      组件B。
      {msg}
    </>
  );
}
`
const pro6 = `<MsgContext.Provider value={msg}>
    <A></A>
</MsgContext.Provider>`



const state1 = `import React, { useState } from 'react';

function Counter() {
  // 声明一个新的state变量，我们称之为 "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击我
      </button>
    </div>
  );
}`
const state2 = `// 错误：直接修改state
count = count + 1;

// 正确：使用setState
setCount(count + 1);`
const state3 = `function Example() {
  const [count, setCount] = useState(0);
  const [fruit, setFruit] = useState('banana');

  return (
    // ...
  );
}`


const hooks1 = `import { useState, useEffect } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  useEffect(() => {
    document.title = \`Count: \${count}\`;
  }, [count]);

  return [count, setCount];
}

// 在组件中使用
function Counter() {
  const [count, setCount] = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}`



const context1 = `import React from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button className={theme}>
      I am styled by theme context!
    </button>
  );
}`
const context2 = `function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}`
const context3 = `import { useContext } from 'react';

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button className={theme}>
      I am styled by theme context!
    </button>
  );
}`

// React插槽功能代码示例
const slot1 = `function Card({ children }) {
  return (
    <div className="card">
      <div className="card-header">卡片头部</div>
      {children}
      <div className="card-footer">卡片底部</div>
    </div>
  );
}

// 使用
<Card>
  <h4>卡片内容</h4>
  <p>这是通过插槽传递的内容</p>
</Card>`


export const code = {
    jsx1, jsx2, jsx3,
    com1, com2, com3,
    ref1, ref2, ref3, ref4, ref5, ref6,
    pro1, pro2, pro3, pro4, pro5, pro6,
    state1, state2, state3,
    hooks1,
    context1, context2, context3,
    slot1, 
}